<template>
    <div class="bg-fff pd-20 bdr-10 h-100p dfc n">
        <div class="statistics">
            <div class="dfc">
                <v-preview title="待办事项" :list="previews" class="bd-1 bdr-10 pd-10"/>
                <v-charts title="交易量统计" class="pd-10 bdr-10 bd-1 fx-1 mt-20" v-model="chartDate" @refresh="getChart"
                          ref="charts"/>
                <v-bill-inventory class="pd-10 bdr-10 bd-1" :inventory="inventory"/>
            </div>
            <div class="dfc">
                <v-member-wallet class="pd-10 bdr-10 bd-1" :wallet="wallet" :corpNo="corpNo"/>
                <v-bi class="pd-10 bdr-10 bd-1 bi mt-20"  :list="biList"/>
                <v-order :tableData="tableData" class="pd-10 bdr-10 bd-1 fx-1 mt-20"/>
            </div>
        </div>
    </div>
</template>
<script lang="ts">
    import { Component, Vue } from 'vue-property-decorator'
    import vPreview from '@/components/home-components/preview'
    import vBi from '@/components/home-components/bi'
    import vOrder from '@/components/home-components/order'
    import vBillInventory from '@/components/home-components/bill-inventory'
    import vCharts from '@/components/home-components/charts'
    import vPlainTable from '@/components/plain-table'
    import vMemberWallet from '@/components/home-components/member-wallet'
    import { Getter } from 'vuex-class'

    @Component({
        components: {
            vPreview, vBi, vCharts, vPlainTable, vOrder, vMemberWallet, vBillInventory
        }
    })
    export default class Boss extends Vue {
        @Getter userInfo


        async getXingYeAccount () {
            let res: AjaxResponse = await this.$axios.get(`g/gateway/account/user/${this.userInfo.userId}`)
            if(res.data[0] != undefined){
            	// let resInfo: AjaxResponse = await this.$axios.get(`g/gateway/account/${res.data[0].id}`)
            }

            // this.corpNo = resInfo.data.corpNo
        }


        previews = [
            {
                path: '/transaction/inventory/list',
                title: '库存票据',
                value: ''
            },
            {
                path: '/transaction/offer/list',
                title: '新增报价',
                value: ''
            },
            {
                path: '/transaction/order/list',
                title: '新增订单',
                value: ''
            }
        ]
        corpNo = ''
        wallet = {}
        inventory = {}
        chartDate = 30
        biList = [
            // {
            //   title: '本月利润合计',
            //   value: ''
            // },
            {
                title: '交易笔数合计(笔)',
                value: ''
            },
            {
                title: '交易金额(万元)',
                value: ''
            },
            // {
            //   title: '平均单笔利润',
            //   value: ''
            // },
        ]
        tableData: TableData = {
            header: [
                {
                    key: 'id',
                    label: '订单号'
                },
                {
                    key: 'simplifiedCreateTime',
                    label: '订单创建时间'
                },
                {
                    key: 'orderStatusName',
                    label: '交易状态'
                },
                {
                    key: 'waitedTime',
                    label: '已等待时间(分)'
                }
            ],
            body: [],
            footer: {
                total: 999,
                currentPage: 1
            },
            expand: {
                title: '渠道专员业绩排名',
                path: '/rank/1'
            }
        }


        makeChart (data) {
            let mc = data.map(v => v[Object.keys(v)[0]])
            let date = data.map(v => Object.keys(v)[0])
            return {
                columns: ['日期', '我的利润', '渠道商佣金'],
                rows: date.map((v, i) => ({
                    '日期': v,
                    '交易量': mc[i],
                }))
            }
        }
        async getChart () {
            let res: AjaxResponse = await  this.$axios.post('g/gateway/operator/enterprise/line', {
                day: this.chartDate,
                userId:this.userInfo.userId
            })
            this.$refs.charts.init(this.makeChart(res.data), {
                dimension: ['日期'],
                metrics: ['交易量'],
                // area: true,
                // stack: { '交易量': ['我的利润', '渠道商佣金', '渠道专员佣金'] }
                // itemStyle: {
                //   color: {
                //     type: 'linear',
                //     x: 0,
                //     y: 0,
                //     x2: 0,
                //     y2: 1,
                //     colorStops: [{
                //       offset: 0, color: 'rgba(78, 147, 255, 0.9)' // 0% 处的颜色
                //     }, {
                //       offset: 1, color: 'rgba(78, 147, 255, 0.2)' // 100% 处的颜色
                //     }]
                //   }
                // },
            })
        }

        async getWallet () {
            let res: AjaxResponse = await  this.$axios.post(`g/gateway/account/sync/${this.userInfo.userId}`, {})
            this.wallet = res.data
        }

        async getBi () {
            let res: AjaxResponse = await this.$axios.get(`g/gateway/operator/enterprise/${this.userInfo.userId}`)
            this.inventory = res.data;
            this.previews[0].value = res.data.billNum
            this.previews[1].value = res.data.quoteNum
            this.previews[2].value = res.data.orderNum

            this.biList[0].value = res.data.monthOrderSum
            this.biList[1].value = res.data.monthTurnover
            // this.biList[2].value = res.data.monthTurnover
            // this.biList[3].value = ''
        }
        async getOrder(){
            let res: AjaxResponse = await  this.$axios.post('g/gateway/order', {
                pageSize: 3,
                currentPage: this.tableData.footer.currentPage,
                enterpriseUserId: JSON.parse(window.sessionStorage.getItem('userInfo')).userId
            })
            if (res.responseCode === 200) {
                this.tableData.body = res.data.items
                this.tableData.footer.total = res.data.totalNum
            }
        }
        mounted () {
            this.getBi()
            this.getWallet()
            this.getOrder()
            this.getChart()
            this.getXingYeAccount()
        }
    }
</script>
<style lang="less" scoped>
    .wallet {
        margin-top: 10px;
    }
    .n {
        min-height: 900px;
        overflow-y: scroll;
    }
    .statistics {
        flex: 1;
        display: flex;
        justify-content: space-between;
        margin-top: 10px;
        > div {
            width: 49.5%;
        }
    }

    .bi {
    }

    .invite {
        line-height: 60px;
        span {
            display: inline-block;
            width: 200px;
        }
    }

</style>
